<template>
  <el-card v-if="appData">
    <div slot="header" v-if="showTitle">
      <rva-kpi-config :appData="appData" :request-params="requestParams"/>
    </div>
    <rva-search
      v-if="appData.searchId"
      :requestParams="requestParams"
      :queryParams="queryParams"
      :viewId="appData.searchId"
      :selector="selector"
    ></rva-search>
    <el-row v-for="(items, listIndex) in appData.itemsList" :key="listIndex">
      <el-col v-for="(item, index) in items" :key="index" style="margin-top: 20px;margin-bottom: 20px" :span="24/columns * getItemColSpan(item)">
        <el-row :gutter="10">
          <rva-kpi-item :app-data="appData" :item="item" :key="item.id"/>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import RvaSearch from "@/components/rva/search";
import RvaForm from "@/components/rva/form";
import RvaKpiConfig from "@/components/rva/kpi/config";
import RvaKpiItem from "@/components/rva/kpi/item";
import {getData} from "@/api/rva/kpi";
import queryContext from "@/components/rva/portal/queryContext";
import {RvaUtils} from "@/api/rva/util";
import handleButtonClick from "@/components/rva/handleButtonClick";

export default {
  components: {
    RvaSearch, RvaKpiConfig, RvaForm, RvaKpiItem
  },
  mixins: [queryContext, handleButtonClick],
  props: ['selector', 'appId', 'requestParams', 'showTitle'],
  created() {
    this.loadData()
  },
  data() {
    return {
      appData: false,
      columns: 3,
    }
  },
  methods: {
    loadData() {
      getData(this.appId, {...this.requestParams, ...this.queryParams}).then(response => {
        this.appData = response.data;
        this.columns = RvaUtils.parseValue(this.appData.data, 'columns', this.appData.items.length)
        this.setQueryParams(this.appData);
      });
    },
    getItemColSpan(item) {
      return RvaUtils.parseValue(item.data, 'colSpan', 1)
    }
  },
  watch: {
    requestParams: {
      handler() {
        this.loadData()
      },
      deep: true
    },
    queryParams: {
      handler() {
        this.loadData()
      },
      deep: true
    }
  }
};
</script>
